import { getAppData, setGlobalData } from '@utils/tools'
import { AtTabs, AtModalAction, AtModal, AtModalContent, AtModalHeader } from "taro-ui"
import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import Modal from '@components/modal'
import { View, Image, Text, Button } from '@tarojs/components'
import watch from '../../../assets/img/watch.png'
import aqy from '../../../assets/img/aqy.png'
import copy from '../../../assets/img/copy.png'
import noData from '../../../assets/img/no-data.png'
import close from '../../../assets/img/close.png'
import './index.scss'


interface IProps {
}
interface IState {
    modalStatus: any,
    cardInfo: any
}


export default class Order extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            modalStatus: false,
            cardInfo: [
                { name: '卡号：', val: '233340066' },
                { name: '密钥：', val: '3456' }
            ]
        }
    }

    componentDidShow() {
    }
    handleCancel() {

    }
    handleConfirm() {

    }
    handleLook() {
        this.setState({
            modalStatus: true
        })
    }
    handleClose=()=> {
        this.setState({
            modalStatus: false
        })
    }
    render() {
        const { cardInfo } = this.state
        return (
            <>
                <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title="我的订单" ></NavigationBar>
                {/* 有数据 */}
                {/* 实物 */}
                <View className='order-info'>
                    <View className='order-top'>
                        <View className='info-left'>
                            <Image className='imgs' src={watch}></Image>
                        </View>
                        <View className='info-right'>
                            <View className='titles'>vivo WATCH GT eSIM版 夏夜黑 软胶</View>
                            <View className='s-con'>
                                <Text className='s-title'>消耗创作值</Text>
                                <Text className='num'>9999</Text>
                            </View>
                            <View className='load'>运送中</View>
                        </View>

                    </View>
                    <View className='order-bottom'>
                        <View className='order-num'>
                            <Text>订单编号</Text>
                            <Text>839220202002</Text>
                        </View>
                        <View className='order-num'>
                            <Text>下单时间</Text>
                            <Text>2023.09.24 10:23:45</Text>
                        </View>
                        <View className='order-num tips'>
                            <Text>订单备注</Text>
                            <Text>黑色</Text>
                        </View>
                        <View className='btns' >
                            <Button onClick={this.handleLook.bind(this)} className="order-btn bg-white">物流信息</Button>
                        </View>
                    </View>
                </View>
                {/* modal物流信息弹窗 */}
                <Modal info="express" open={this.state.modalStatus} close={this.handleClose}/>
                {/* 虚拟 */}
                <View className='order-info'>
                    <View className='order-top'>
                        <View className='info-left'>
                            <Image className='imgs' src={aqy}></Image>
                        </View>
                        <View className='info-right'>
                            <View className='titles'>爱奇艺会员卡周卡</View>
                            <View className='s-con'>
                                <Text className='s-title'>消耗创作值</Text>
                                <Text className='num'>9999</Text>
                            </View>
                            {
                                cardInfo.map(item => {
                                    return (
                                        // style="margin-bottom:22rpx"
                                        <View className='flex code-num' >
                                            <View className='load padding-right-xl'>
                                                <Text> {item.name}<Text>{item.val}</Text></Text>
                                            </View>
                                            <View className='image-sm copy'></View>
                                            <Text className='text-gray1 text-sm info-copy'>复制</Text>
                                        </View>
                                    )
                                })
                            }
                        </View>
                    </View>
                    <View className='order-bottom'>
                        <View className='order-num'>
                            <Text>订单编号</Text>
                            <Text>839220202002</Text>
                        </View>
                        <View className='order-num'>
                            <Text>下单时间</Text>
                            <Text>2023.09.24 10:23:45</Text>
                        </View>
                        <View className='order-num tips'>
                            <Text>订单备注</Text>
                            <Text>黑色</Text>
                        </View>
                    </View>
                </View>
                {/* 无数据 */}
                {/* <View className="no-data">
                    <View className='s-data'>
                        <Image src={noData}>
                        </Image>
                        <Text>暂无订单</Text>
                    </View>
                </View> */}
            </>
        )
    }
}
